<template>
	<view class="manager-page">
		<u-navbar title="掌柜中心" bgColor="rgba(255,255,255,0.0)" left-icon="" :placeholder="true">
		</u-navbar>
		<view class="content">
			<view class="num-box">
				<view class="deposit">
					<view class="deposit-title">
						<text>余额</text>
						<!-- <u-icon name="arrow-right" color="#ffffff" size="12"></u-icon> -->
					</view>
					<view class="deposit-num">
						￥<text>{{userinfo.balance}}</text>
					</view>
				</view>
				<view class="wallet">
					<view class="wallet-item" @click="goRecord">
						<view class="wallet-title">
							<text>余额明细</text>
							<u-icon name="arrow-right" color="#ffffff" size="14"></u-icon>
						</view>
						<!-- <view class="wallet-num">
							￥<text>0.23</text>
						</view> -->
					</view>
					<!-- <view class="wallet-item">
						<view class="wallet-title">
							<text>集点红利</text>
							<u-icon name="arrow-right" color="#ffffff" size="14"></u-icon>
						</view>
						<view class="wallet-num">
							￥<text>0.23</text>
						</view>
					</view> -->
				</view>
			</view>
			<view class="recharge">
				<view class="recharge-item" @click="recharge('/pages/manager/recharge/index')">
					充值
				</view>
				<view class="recharge-item withdraw" @click="recharge('/pages/manager/withdrawal/index')">
					提现
				</view>
			</view>
			<view class="ability">
				<view class="ability-item" v-for="(item,index) in ability" :key="index" @click="goability(item.url)">
					<image :src="item.img" mode=""></image>
					<view>
						{{item.text}}
					</view>
				</view>
			</view>
			<view class="tabs">
				<view :class="item.show == true?'activity-item':''" class="tabs-item" v-for="(item,index) in tabsLits"
					:key="index" @click="cutTbas(index)">
					{{item.text}}
				</view>
			</view>
			<view class="notice">
				<view class="notice-item" v-for="(item,index) in hotlist" :key="index" @click="godetails(item.id)">
					<view class="notice-left">
						<view class="left-title">
							<image src="../../static/goods/voice.png" mode=""></image>
							<view class="left-text">
								{{item.title}}
							</view>
						</view>
						<view class="time">
							{{item.time}}
						</view>
					</view>
					<u-icon name="arrow-right" color="#999999" size="20"></u-icon>
				</view>
			</view>
			<u-loadmore :status="status" />
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				ability: [{
						img: '../../static/goods/ability1.png',
						text: '平台云仓',
						url:'/pages/manager/warehouse/index'
					},
					// {
					// 	img: '../../static/goods/ability2.png',
					// 	text: '礼品交换'
					// },
					{
						img: '../../static/goods/ability3.png',
						text: '客服中心'
					},
					{
						img: '../../static/goods/ability4.png',
						text: '新手帮助',
						url:'/pages/manager/help/index'
					}
				],
				tabsLits: [{
						text: '一般公告',
						show: true
					},
					{
						text: '活动公告',
						show: false
					}
				],
				hotlist: [],
				nocindex: 0,
				page: 1,
				status: 'loadmore',
				userinfo:{}
			}
		},
		onLoad() {
			this.getnoc()
		},
		onShow() {
			this.getuserinfo()
		},
		onReachBottom() {
			this.page = this.page + 1
			this.status = 'loading';
			if (this.nocindex == 0) {
				this.getnoc()
			} else {
				this.getevenoc()
			}
		},
		methods: {
			getuserinfo() {
				this.$Request({
					method: 'GET',
					url: '/api/member/balance/getInfo',
					data: {},
					ismsg: false,
				}).then(res => {
					if (res.code == 200) {
						this.userinfo = res.data
						console.log(this.userinfo)
					}
				})
			},
			godetails(id){
				uni.navigateTo({
					url:'/pages/manager/details/index?id='+id
				})
			},
			goability(url){
				uni.navigateTo({
					url:url
				})
			},
			goRecord(){
				uni.navigateTo({
					url:'/pages/manager/record/index'
				})
			},
			getnoc() {
				let parasm = {
					pageNum: this.page,
					pageSize: 10
				}
				this.$Request({
					method: 'GET',
					url: '/api/goods/announcement/normal/list',
					data: parasm,
					ismsg: false,
				}).then(res => {
					if (res.code == 200) {
						if (res.rows.length < 10) {
							this.status = 'nomore';
						}
						if (this.page == 1) {
							this.hotlist = res.rows
						} else {
							this.hotlist = [...this.hotlist, ...res.rows]
						}
					}
				})
			},
			getevenoc() {
				let parasm = {
					pageNum: this.page,
					pageSize: 10
				}
				this.$Request({
					method: 'GET',
					url: '/api/goods/announcement/events/list',
					data: parasm,
					ismsg: false,
				}).then(res => {
					if (res.code == 200) {
						if (res.rows < 10) {
							this.status = 'nomore';
						}
						if (this.page == 1) {
							this.hotlist = res.rows
						} else {
							this.hotlist = [...this.hotlist, ...res.rows]
						}
					}
				})
			},
			cutTbas(index) {
				this.tabsLits.map(item => {
					item.show = false
				})
				this.tabsLits[index].show = true
				this.nocindex = index
				this.page = 1
				if (this.nocindex == 0) {
					this.getnoc()
				} else {
					this.getevenoc()
				}
			},
			recharge(url){
				uni.navigateTo({
					url:url
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.manager-page {
		min-height: calc(100vh - 91rpx);
		background-image: url('../../static/goods/top-bg.png');
		background-size: 100% 561rpx;
		background-repeat: no-repeat;

		.content {
			padding: 30rpx;

			.num-box {
				width: 100%;
				height: 336rpx;
				padding: 50rpx;
				background-image: url('../../static/goods/num-bg.png');
				background-size: 100% 100%;
				background-repeat: no-repeat;

				.deposit {
					.deposit-title {
						color: #ffffff;
						display: flex;
						align-items: center;
						font-size: 28rpx;

						text {
							margin-right: 15rpx;
						}
					}

					.deposit-num {
						margin-top: 10rpx;
						font-size: 32rpx;
						color: #ffffff;

						text {
							font-weight: bold;
							font-size: 48rpx;
						}
					}
				}

				.wallet {
					display: flex;
					margin-top: 50rpx;

					.wallet-item {
						margin-right: 60rpx;

						.wallet-title {
							color: #ffffff;
							display: flex;
							align-items: center;
							font-size: 28rpx;

							text {
								margin-right: 15rpx;
							}
						}

						.wallet-num {
							margin-top: 10rpx;
							font-size: 24rpx;
							color: #ffffff;

							text {
								font-weight: bold;
								font-size: 28rpx;
							}
						}
					}
				}
			}

			.recharge {
				display: flex;
				justify-content: space-between;
				margin-top: 30rpx;

				.recharge-item {
					width: 48%;
					height: 100rpx;
					background-image: url('../../static/goods/recharge.png');
					background-repeat: no-repeat;
					background-size: 100% 100%;
					padding-left: 100rpx;
					line-height: 100rpx;
					color: #FF9E47;
					font-size: 32rpx;
					font-weight: bold;
				}

				.withdraw {
					background-image: url('../../static/goods/withdraw.png');
					color: #FF4772;
				}
			}

			.ability {
				display: flex;
				justify-content: space-around;
				margin-top: 20rpx;

				.ability-item {
					text-align: center;
					font-size: 28rpx;
					font-weight: bold;
					color: #333333;

					image {
						width: 90rpx;
						height: 90rpx;
					}
				}
			}

			.tabs {
				width: 70%;
				display: flex;
				justify-content: space-between;
				background-color: #fef1ea;
				padding: 6rpx;
				border-radius: 50rpx;
				margin: 0 auto;
				margin-top: 30rpx;

				.tabs-item {
					width: 50%;
					padding: 25rpx;
					border-radius: 50rpx;
					font-size: 28rpx;
					color: #333333;
					font-weight: bold;
					text-align: center;
				}

				.activity-item {
					color: #ffffff;
					background: linear-gradient(90deg, #FE8A03 0%, #FA5900 100%);
				}
			}

			.notice {
				margin-top: 20rpx;

				.notice-item {
					padding: 30rpx;
					background: #FFFFFF;
					box-shadow: 0rpx 0rpx 16rpx 1rpx rgba(0, 0, 0, 0.08);
					border-radius: 30rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin-top: 30rpx;

					.notice-left {
						.left-title {
							display: flex;
							align-items: center;

							image {
								width: 34rpx;
								height: 31rpx;
							}

							.left-text {
								font-size: 28rpx;
								color: #333333;
								font-weight: bold;
								margin-left: 20rpx;
							}
						}

						.time {
							font-size: 24rpx;
							color: #999999;
							margin-top: 10rpx;
						}
					}
				}
			}

		}
	}
</style>